{"id":865,"date":"2010-02-10T17:51:12","date_gmt":"2010-02-10T22:51:12","guid":{"rendered":"http:\/\/www.gravityhelp.com\/?p=865"},"modified":"2018-03-29T19:37:30","modified_gmt":"2018-03-29T19:37:30","slug":"gravity-forms-css-visual-guide","status":"publish","type":"post","link":"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/","title":{"rendered":"Gravity Forms CSS Visual Guide"},"content":{"rendered":"

\"\"<\/p>\n

View Guide (HTML Version)<\/a><\/strong> | Download Guide (png)<\/a><\/strong><\/p>\n

We've put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.
\n<\/p>\n

Basic Structure<\/h3>\n

Gravity Forms are structured so that every element can be targeted and manipulated via CSS. Most elements share reusable class names to affect styling, and many elements have unique ID's that you can use to target specific elements within the form. By using CSS inheritance<\/a>, you can effectively style every element in your form.<\/p>\n

All element ID's are based on the unique form ID and then a field ID. For example: #gform_wrapper_xx<\/strong> where \"xx\" is the form ID or #field_xx_yyy<\/strong> where \"xx\" is the form ID and \"yyy\" is the field ID. <\/p>\n

Configurable Classes<\/h3>\n

There are 3 label classes that are applied based on the individual form settings, .top_label, .left_label and .right_label. Other elements change positions, widths, etc. based on inheritance from these label classes. Only the \"top_label\" class is represented in this example. Additionally, for many of the individual fields, there are classes of .small, .medium and .large which are also defined in the form admin.<\/p>\n

Finally, for most of the fields, the user can define additional class names in order to apply additional custom styles or to target elements for other types of manipulation.<\/p>\n","protected":false},"excerpt":{"rendered":"

View Guide (HTML Version) | Download Guide (png) We’ve put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[221],"tags":[223,224,225,226],"yoast_head":"\nGravity Forms CSS Visual Guide | Gravity Forms<\/title>\n<meta name=\"description\" content=\"We've put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gravity Forms CSS Visual Guide\" \/>\n<meta property=\"og:description\" content=\"View Guide (HTML Version) | Download Guide (png) We've put together a simple visual guide to help illustrate the structure of a form and the CSS class\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Gravity Forms\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GravityForms\" \/>\n<meta property=\"article:published_time\" content=\"2010-02-10T22:51:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-29T19:37:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/02\/guide_header1.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@GravityForms\" \/>\n<meta name=\"twitter:site\" content=\"@GravityForms\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.gravityforms.com\/#organization\",\"name\":\"Gravity Forms\",\"url\":\"https:\/\/www.gravityforms.com\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/GravityForms\",\"https:\/\/twitter.com\/GravityForms\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gravityforms.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/06\/gravity_forms_logo.jpg\",\"contentUrl\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/06\/gravity_forms_logo.jpg\",\"width\":268,\"height\":294,\"caption\":\"Gravity Forms\"},\"image\":{\"@id\":\"https:\/\/www.gravityforms.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gravityforms.com\/#website\",\"url\":\"https:\/\/www.gravityforms.com\/\",\"name\":\"Gravity Forms\",\"description\":\"WordPress Contact Forms\",\"publisher\":{\"@id\":\"https:\/\/www.gravityforms.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.gravityforms.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\/wp-content\/uploads\/2010\/02\/guide_header1.jpg\",\"contentUrl\":\"\/wp-content\/uploads\/2010\/02\/guide_header1.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/#webpage\",\"url\":\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/\",\"name\":\"Gravity Forms CSS Visual Guide | Gravity Forms\",\"isPartOf\":{\"@id\":\"https:\/\/www.gravityforms.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/#primaryimage\"},\"datePublished\":\"2010-02-10T22:51:12+00:00\",\"dateModified\":\"2018-03-29T19:37:30+00:00\",\"description\":\"We've put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Gravity Forms\",\"item\":\"https:\/\/www.gravityforms.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To\",\"item\":\"https:\/\/www.gravityforms.com\/category\/how-to\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gravity Forms CSS Visual Guide\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.gravityforms.com\/#\/schema\/person\/e84981bf10d52c3bafac4ab670ef5c6a\"},\"headline\":\"Gravity Forms CSS Visual Guide\",\"datePublished\":\"2010-02-10T22:51:12+00:00\",\"dateModified\":\"2018-03-29T19:37:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/#webpage\"},\"wordCount\":227,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.gravityforms.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/#primaryimage\"},\"thumbnailUrl\":\"\/wp-content\/uploads\/2010\/02\/guide_header1.jpg\",\"keywords\":[\"Classes\",\"CSS\",\"Guide\",\"style\"],\"articleSection\":[\"How To\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.gravityforms.com\/gravity-forms-css-visual-guide\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gravityforms.com\/#\/schema\/person\/e84981bf10d52c3bafac4ab670ef5c6a\",\"name\":\"Kevin Flahaut\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gravityforms.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/84dbdc61fbcd086966bfae04b48e5166?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/84dbdc61fbcd086966bfae04b48e5166?s=96&d=mm&r=g\",\"caption\":\"Kevin Flahaut\"},\"sameAs\":[\"http:\/\/www.rocketgenius.com\"],\"url\":\"https:\/\/www.gravityforms.com\/author\/kevin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts\/865"}],"collection":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/comments?post=865"}],"version-history":[{"count":0,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts\/865\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/media?parent=865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/categories?post=865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/tags?post=865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}